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HTML5 Canvas Cheat Sheet 



HTML5 CANVAS CHEAT SHEET 

This cheat sheet summarizes the complete HTML5 Canvas API for the 2D context, based on to the W3C HTML5 Canvas Spec . It also provides 
techniques for handling common proceedures. 



HTML5 CANVAS ELEMENT 

Html5 canvas element 

<canvas id="myCanvas" width="5O0" height="300"> 

Html5 canvas element with fallback content 

<canvas id="myCanvas" width="5O0" height="3O0"> 

your browser doesn't support canvas! 
</canvas> 

2d context 

van context = canvas. getContext( '2d' ) ; 

Webgl context (3d) 

van context = canvas. getContext( 'webgl' ) ; 

COLOR FORMATS 

String 

context . fillStyle = 'red'; 

Hex Long 

context . fillStyle 

Hex Short 

context . fillStyle 
RGB 

context . fillStyle 
RGBA 

context . fillStyle 

IMAGES 



■#ffOGOI3' 



' rgb(255,0,0) 



' rgba(255, 0,0,1) ' 



Draw Image with default size 

van imageObj = new ImageO; 
imageObj . onload = function (} { 

context. drawlmage( imageObj , x, y) ; 

}; 

imageObj . src = ' path/to/my/image. ] pg ' 

Draw image and set size 

var imageObj = new ImageO; 
imageObj . onload = function () { 

context . d rawlmage ( imageObj 
}; 

imageObj. src = ' path/to/my/image. jpg 



y, width, height) 



Crop image 



SHAPES 



STYLES 



Draw rectangle 

context. rect(x, y, width, height); 
context. filK ) ; 
context. St poke 0 ; 

Fill rectangle shorthand 

context . fillRect (x, y, width, height); 

Stroke rectangle shorthand 

context. St rokeRect(x, y, width, height) 

Draw circle 

context. arc(x, y, radius, 0, Hath. PI * 
context. fillO; 
context. St rokeO ; 

PATHS 

Begin Path 

context . beginPath ( ) ; 

Line 

context. lineTo(x, y) ; 
Arc 



Fill 

context . fillStyle 
context. fillO; 



' red ' 



Stroke 

context . strokeStyle = 'red'; 
context . stroke( ) ; 

Linear gradient 

var grd = context. createLinearGradient{xl, 
grd.addColorStop(0, ' red' ) ; 
grd .addColorStop(l, ' blue' } ; 
context . fillStyle = grd; 
context. fillO; 

Radial gradient 

var grd = context. createRadialGradient{xl, 
grd.addColorStop(0, ' red' ) ; 
grd .addColorStop(l, ' blue' } ; 
context . fillStyle = grd; 
context. fillO; 

Pattern 



var imageOb] = new ImageO; 
imageObj .onload = function () { 
var pattern = context. createPattern(imag 
context . fillStyle = pattern; 
context. arc(x, y, radius, startAngle, endAngle, counterCti5iiFilti^j^)fiii ( ) ; 

}; 



Quadratic curve 

context. quadraticCurveTo(cx, cy, x, y) ; 

Bezier curve 

context . bezierCurveTo(cxl, cyl, cx2, cy2, x, y); 

Close Path 

context . closePath { } ; 

TEXT 

Fill Text 

context. font = '40px Arial'; 
context . fillStyle = 'red'; 
context. fillText( 'Hello World! 



imageObj. src = 'path/to/my/image. jpg' ; 

Line Join 

context . lineJoin = ' mite r| round [bevel ' ; 

Line Cap 

context . lineCap = ' butt | round | square' ; 

Shadow 

context. shadowColor = 'black'; 
context. shadowBlur = 20; 
context. shadowOffsetX = 10; 
context. shadowOffsetY = 10; 



Stroke Text 

context. font = '40pt Arial'; 
context. St rokeStyle = 'red'; 
context. St rokeText( 'Hello World! 



X, y) ; 



X, y) ; 



Alpha (Opacity) 

context . globalAlpha 



TRANSFORMS 



0.5; // between 6 an 



var imageObj = new ImageO; 
imageObj . onload = function () { 

context. drawImage(imageObj , sx, sy, sw, sh, dx, dy, context font 

}; 

imageObj. src = ' path/to/my/image. j pg ' ; 



STATE STACK 



' italic 40px Arial 



sta rt I end | left | center | right ' 



Push State onto Stack 

context . save( ) ; 

Pop State off of Stack 

context . restore( ) ; 

CLIPPING 



Translate 

context. translate(x, y); 

Scale 

context . scale(x, y) ; 

Rotate 

context . rotate ( radians ) ; 

Flip Horizontally 

top I hanging | middle | alphabetic | context . scale( - 1, 1) ; 

Flip Vertically 

context. scale(l, -1); 

Custom Transform 

context. transform (a, b, c, d ,e, f); 

Set Transform 



Bold Text 

bold 40px Arial 

Italic Text 

context . font 

Text Align 

context . textAlign 

Text Baseline 

context . textBaseline 
I bottom' ; 

Get Text Width 

var width = context. measureText( 'Hello world' ) .width; 



Clip 
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// draw path here 
context . clip( ) ; 



DATA URLS 



IMAGE DATA 



imageObj . src = dataURL; 



Get DataURL 

van dataURL = canvas . toDataURL{ ) ; 

Render Canvas with Data URL 

van imageObj = new ImageO; 
imageObj . onload = function () { 
context. drawImage(imageObj , 0, 0) 

}; 



context . setTransform(a, b, c, d ,e, f); 

Shear 

Get Image Data 

context. transform(l, sy, sx, 1, 0, 0); 
var imageData = context. getImageData(x, y, width, height); 

Reset 

context. setTransformd, 0, 0, 1, 0, 0) ; 



var data = imageData. data; 

Loop Through Image Pixels 

var imageData = context. getImageData(x, y, width, heig' 



var data = imageData. data; 
var len = data. length; 
var i, red, green, blue, alpha; 

for(i = 0; i < len; i += 4) { 
red = data[i] ; 
green = data[i + 1] ; 
blue = data[i + 2] ; 
alpha = data[i + 3] ; 

} 

Loop Through Image Pixels With Coordinates 

var imageData = context. getImageData(x, y, width, height); 

var data = imageData. data; 

var x, y, red, green, blue, alpha; 



COMPOSITES 



Composite Operations 

context .globalCompositeOpe rat ion 



for(y = 0; y < imageHeight; y++) { 
for(x = 0; X < imageWidth; x++) { 

red = data [( (imageWidth * y) + x) * 4] ; 
green = data [{ (imageWidth * y) + x) * 4 + 1] ; 
blue = data[ ( (imageWidth * y) + x) * 4 + 2]; 
alpha = data [( (imageWidth * y) + x) * 4 + 3] ; 

} 

} 

Set Image Data 

context . putImageData( imageData, x, y) ; 
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